<template>
    <div>
        <!-- <Cascader class="mr-10"
              placeholder="请选择地区"
              v-model="valueArray"
              :data="newSbType"
              :load-data="loadData"
              change-on-select
              @on-change="changeData"
              ref="click"
              trigger="hover"
              @on-visible-change='open'>
    </Cascader> -->
        <div v-if="toChildrenProvincialData[0] == ''">
            <Cascader class="mr-10"
                      placeholder="请选择地区"
                      :data="newSbType"
                      :load-data="loadData"
                      change-on-select
                      @on-change="changeData"
                      ref="click"
                      trigger="hover"
                      @on-visible-change='open'>
            </Cascader>

            <!-- {{toChildrenProvincialData}} -->
        </div>
        <div v-if="toChildrenProvincialData[0] !== ''">
            <Cascader class="mr-10"
                      placeholder="请选择地区"
                      v-model="valueArray"
                      :data="newSbType"
                      :load-data="loadData"
                      change-on-select
                      @on-change="changeData"
                      ref="click"
                      trigger="hover"
                      @on-visible-change='open'>
            </Cascader>

            <!-- {{valueArray}} -->
        </div>
    </div>

</template>

<script>
import cityFormApi from '@/api/base_sys/gcDispenser.js'
import moment from 'moment'
import { Message } from 'iview'
import { mapActions } from 'vuex'
export default {
	props: ['toChildrenProvincialData'],
	label: 'cityForm',
	data() {
		return {
			value: true,
			indeterminate: false,
			checkAll: false,
			valueArray: [],
			// valueArray: toChildrenProvincialData,
			newSbType: [],
			newObject: {
				provid: '',
				cityid: '',
				distid: '',
				strtid: '',
				commid: '',
				comminid: ''
			},
			b: 0,
			defArea: '',
			selectedData: '',
			// 弹出层数据
			modal: {
				cityForm: {
					type: 'create', // create 新建，update 修改
					title: '新建',
					formData: {}
				}
			}
			// a:0
			// provincialData:props.toChildrenProvincialData
		}
	},
	methods: {
		...mapActions([
			// 'handleLogin',
			// 'getUserInfo',
			'reArea'
		]),
		// 城市级联
		getProvince(data) {
			cityFormApi.getDown(data).then(res => {
				let that = this
				let province = res.data
				for (let i = 0; i < province.length; i++) {
					let wzpz = province[i]
					wzpz.value = wzpz.id
					// wzpz.value = wzpz.name

					wzpz.label = wzpz.name
					wzpz.loading = false
					wzpz.children = []
					that.newSbType.push(wzpz)
				}
			})
		},
		loadData(item, callback) {
			item.loading = true
			cityFormApi.getDown(item.id).then(res => {
				if (res.data == '') {
					let wzpz = {}
					wzpz.value = ''
					wzpz.label = '当前暂无数据'
					// wzpz.disabled = true ;
					wzpz.loading = false
					// item.children.push(wzpz);
				} else {
					for (let city of res.data) {
						let wzpz = city
						cityFormApi.getDown(wzpz.id).then(rs => {
							if (rs.data != '') {
								wzpz.value = wzpz.id
								// wzpz.value = wzpz.name

								wzpz.label = wzpz.name
								wzpz.loading = false
								wzpz.children = []
							} else {
								wzpz.value = wzpz.id
								// wzpz.value = wzpz.name

								wzpz.label = wzpz.name
							}
						})

						item.children.push(wzpz)
						console.log(item, 'item')
						console.log(item.children, 'item.children1111111111')
					}

					item.loading = false
					callback()
				}
			})
		},
		changeData(value, selectedData) {
			let area = this.defArea
			var o = 0
			for (var i in this.newObject) {
				if (o < area[7]) {
					this.newObject[i] = area[o]
				} else {
					this.newObject[i] = value[this.b]
					this.b++
				}
				o++
			}
			this.b = 0
			console.log(this.newObject,'this.newObject')
			this.$emit('ProvinceData', this.newObject)
		},
		open(Boolean) {
			const that = this
			that.newSbType = []
			console.log(that.newSbType,'that.newSbType111111111')
			if (Boolean == true) {
				this.getProvince(this.defArea[6])
			}
		},
		//分割字符串
		getCookie() {
			var strcookie = document.cookie // 获取cookie字符串
			var arrcookie = strcookie.split(';') // 分割

			// 遍历匹配
			for (var i = 0; i < arrcookie.length; i++) {
				let arr = arrcookie[i].split('=')
				if (arr[0] == ' area' || arr[0] == 'area') {
					arr = arr[1].split(',')
					return arr
				}
			}
		}
	},
	// watch: {
	// 	toChildrenProvincialData(newVal, oldVal) {
	// 		// console.log('监听旧数据：' + oldVal)
	// 		// console.log('监听新数据：' + newVal)
            
    //         console.log(this.newSbType,'this.newSbType1111111111111')
            
	// 		function provinceData(data) {
	// 			cityFormApi.getDown(data).then(res => {
	// 				let that = this
                    
	// 				let province = res.data
	// 				for (let i = 0; i < province.length; i++) {
	// 					let wzpz = province[i]
                        
	// 					// wzpz.value = wzpz.id
	// 					wzpz.value = wzpz.name

	// 					wzpz.label = wzpz.name
	// 					wzpz.loading = false
	// 					wzpz.children = []
    //                     console.log(wzpz,'wzpz')
    //                     // this.newSbType.push(wzpz)
	// 					// that.newSbType.push(wzpz)
                        
                        
	// 				}
	// 			})
	// 		}
    //         provinceData(this.toChildrenProvincialData[0])  
    //         provinceData(this.toChildrenProvincialData[1])
    //         provinceData(this.toChildrenProvincialData[2])
                
	// 		// console.log(provinceData(this.toChildrenProvincialData[0]),'22223333333333333333')
	// 	}
	// },
	created() {
		this.defArea = this.getCookie()
		window.defArea = this.defArea
		console.log(this.defArea, 'this.defArea1111')
        
	},
	mounted() {
		this.defArea = this.getCookie()
		window.defArea = this.defArea
	    let area = this.toChildrenProvincialData
		this.valueArray = area
        
	},
	updated() {
		this.defArea = this.getCookie()
		window.defArea = this.defArea
		let area = this.toChildrenProvincialData
		this.valueArray = area
        console.log(this.valueArray,'11111111111')
	}
}
</script>
